
<template>
    <Modal :title="modalTitle" v-model="isModalOpen" :mask-closable="false" :width="800" @on-visible-change="changeModalState" footer-hide>
        <div class="itemModal">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100" :disabled="modalType === 'read'">
                <Row>
                    <Col span="12">
                        <FormItem label="模型代码" prop="modelCode" style="w200">
                            <Input clearable v-model="formValidate.modelCode" placeholder />
                        </FormItem>
                    </Col>

                    <Col span="12">
                        <FormItem label="模型类型" prop="modelType">
                            <Select v-model="formValidate.modelType" clearable placeholder>
                                <Option v-for="(item,index) in dataDict.gradeModelTypeDict" :key="index" :value="item.value">{{item.title}}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="模型名称" prop="modelName">
                            <Input v-model="formValidate.modelName" placeholder />
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="模型总分" prop="modelScore">
                            <!-- <Input v-model="formValidate.modelScore" placeholder /> -->
                            <InputNumber :max="100" :min="1" v-model="formValidate.modelScore" placeholder style="width:100%"></InputNumber>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="状态" prop="state">
                            <Select v-model="formValidate.state" placeholder>
                                <Option v-for="(item,index) in dataDict.gradeModelStatusDict" :key="index" :value="item.value">{{item.title}}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="时间维度" prop="timeDimension">
                            <Select v-model="formValidate.timeDimension" placeholder>
                                <Option v-for="(item,index) in dataDict.timeDimensionDict" :key="index" :value="item.value">{{item.title}}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="评分模型用途" prop="modelUsage">
<!--                            <Input type="textarea" v-model="formValidate.modelUsage" placeholder />评分模型用途(gradeModelPurpose) -->
                            <Select v-model="formValidate.modelUsage" multiple  placeholder>
                                <Option v-for="(item,index) in dataDict.gradeModelPurposeDict" :key="index" :value="item.value">{{item.title}}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="备注" prop="remark">
                            <Input type="textarea" v-model="formValidate.remark" placeholder />
                        </FormItem>
                    </Col>
                </Row>
            </Form>
            <Row>
                <Col span="24">
                    <div class="text-center contract-close-btns">
                        <Button type="primary" v-show="modalType === 'add' || modalType === 'change'" @click="handleSubmit('formValidate')">保存</Button>
                        <Button type="primary" v-show="modalType === 'add'" @click="changeModalState(false)">取消</Button>
                        <Button type="primary" v-show="modalType === 'read'" @click="changeModalState(false)">关闭</Button>
                        <Button type="primary" v-show="modalType === 'change'" @click="changeModalState(false)">返回</Button>
                    </div>
                </Col>
            </Row>
        </div>
    </Modal>
</template>

<script>

export default {
    // 对评分模型列表 弹窗
    name: "itemModal",
    components: {},
    props: {
        dataDict: {
            type: Object
        },
        modal: {
            type: Boolean,
            required: true
        },
        modalTitle: {
            type: String,
            default: ""
        },
        getDataFn: {
            type: Function,
            required: true
        },
        modalType: {
            type: String,
            required: true,
        },
        modalData: {
            type: Object
        },
    },
    data() {
        return {
            isModalOpen: this.modal,
            loading: false,
            formValidate: {
                modelCode: '',
                modelType: '',
                modelName: '',
                modelScore: 0,
                state: '',
                modelUsage: [],
                remark: '',
            },
            ruleValidate: {
                modelCode: [{ required: true, type: 'string', message: '请输入模型代码', trigger: 'change' }],
                modelType: [{ required: true, message: '请选择模型类型', trigger: 'change' }],
                modelName: [{ required: true, type: 'string', message: '请输入模型名称', trigger: 'change' }],
                modelScore: [{ required: true, type: 'number', message: '请输入模型总分', trigger: 'change' }],
                state: [{ required: true, message: '请选择状态', trigger: 'change' }],
                timeDimension: [{ required: true, message: '请选择时间维度', trigger: 'change' }],
            }
        };
    },
    watch: {
        modal: function (newVal) {
            if (newVal) {
                if (this.modalType !== 'add')
                    this.formValidate = Object.assign({}, this.formValidate, this.modalData)
            }else {
                this.$refs.formValidate.resetFields()
            }
            this.isModalOpen = newVal;
        }
    },
    methods: {

        save(data) {
            let getDataFn = this.getDataFn;
            if (getDataFn && typeof getDataFn === "function") {
                if(this.modalType === 'add') {
                    data.id = null
                }
                getDataFn(data).then(res => {
                    this.loading = false;
                    console.log(55555555555,res);
                    if (res.code === "0000") {
                        this.$emit("closeModal",true)
                        this.$Message.success(res.data);
                    }
                }).catch(e => {
                    console.log(e);
                    this.loading = false;
                });
            }
        },
        // 提交
        handleSubmit(name) {
            if (this.loading) return;
            this.$refs[name].validate(valid => {
                if (valid) {
                    this.loading = true;
                    this.save(this.formValidate);
                }
            });
        },

        //  弹窗切换
        changeModalState(bool) {
            if (!bool) this.$emit("closeModal");
        },
    }
};
</script>
<style scoped lang="less">
</style>
